// autoprefixer: 为html、body添加font-size，窗口调整时候重新设置font-size
const autoprefixer = require('autoprefixer');

// 引入等比适配插件
const px2rem = require('postcss-pxtorem');

// // 配置基本大小
const postcss = px2rem({
  rootValue: 192, // 设计稿的除以10得到适配范围,一般为192,设计稿为1920,最终页⾯会换算成 10rem,1rem=192px
  unitPrecision: 5, // 保留rem⼩数点多少位。
  propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
  exclude: /node_modules/, // 要忽略并保留为 px 的文件路径，正则表达式或者函数都可以传。
  selectorBlackList: ['.el'],  //则是⼀个对css选择器进⾏过滤的数组，⽐如你设置为['fs']，那例如fs-xl类名，⾥⾯有关px的样式将不被转换，这⾥也⽀持正则写法。
  // replace: true, //（布尔值）替换包含REM的规则，而不是添加回退
  // mediaQuery: false, //媒体查询( @media screen 之类的)中不⽣效
  // minPixelValue: 12, //px⼩于12的不会被转换,默认 0
})

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  // 打包配置
  publicPath: './',
  // 打包名字
  outputDir: 'dist',
  // 静态资源包名字
  assetsDir: 'static',
  // 是否在保存时候检查
  // lintOnSave: process.env.NODE_ENV === 'development',
  // 控制是否在生产环境下生成map文件 false将提高构建速度  映射文件 打包时使用
  productionSourceMap: false,
  // 当设置为‘error’时，检查出的错误会触发编译失败
  // lintOnSave: true,
  devServer: {
    open: true,
    client: {
      overlay: false // 编译错误时，取消全屏覆盖（建议关掉）
    }
  },

  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [autoprefixer(), postcss]
        }
      }
    }
  },
})